<template>
     <div class="title">路由守卫&动态路由&编程式路由</div>
     <div class="inner">
        <div class="Txtbox">
         <router-link to="/VueRouter/logo">Logo</router-link>
          <router-link to="/VueRouter/intro">简介</router-link> 
         </div>
         <div class="intro">
            <button @click="toRoute">编程式路由跳转到/logo</button>
            <button @click="addNewRoute">动态路由生成/News</button>
            <button @click="removeRoute">动态路由删除/News</button> 
        </div>
       <router-view v-slot="{Component}">
           <component :is="Component"></component>
       </router-view>
     </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const {proxy} =getCurrentInstance();//当前vue实例
//编程式路由
function toRoute(){
     //proxy.$router.push({path:'logo'});
     //proxy.$router.push({name:'logo'}); //路由跳转
     proxy.$router.push({name:'logo',query:{wd:'1'}})//路由传值
}
//动态路由
function addNewRoute(){
     proxy.$router.addRoute({ 
                name:'news',
                path: '/news',
                component: () => import('@/components/routerParties/news.vue'),
            });
    proxy.$router.push({name:'news'});
}
function removeRoute(){
    proxy.$router.removeRoute('news');
    console.log('删除了');
}
</script>

<style scoped>

div.Txtbox {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  margin: 10px 10px 0 10px;
  padding: 10px;
}

div.Txtbox a {
  text-decoration: none;
  padding: 10px;
  color: black;
}
div.intro {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    margin: 10px 10px 0 10px;
    padding: 8px;
}
button{
    display: inline-block;
    margin: 0 10px;
}
</style>